export const Pie1 = () => {
  return `
  <template>
  <div
    class="content"
    :style="{
      height: height,
      width: width,
    }"
  >
    <div id="huikuan-echarts"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import "echarts";
const props = defineProps({
  width: {
    //列数据
    type: String,
    default: "930px",
  },
  height: {
    type: String,
    default: "492px",
  },
});
onMounted(() => {
  getEcharts();
});
const state = reactive({
  huikuna: {
    weihuikuan_yidaoqi: 125, //已到期
    weihuikuan_weidaoqi: 125, //未到期
    yihuikuan: 750, //已回款
  },
});
const getEcharts = () => {
  let data = [
    {
      value: state.huikuna.weihuikuan_yidaoqi,
      name: "已到期",
    },
    {
      value: state.huikuna.weihuikuan_weidaoqi,
      name: "未到期",
    },
    {
      value: state.huikuna.yihuikuan,
      name: "已回款金额",
      labelLine: {
        lineStyle: {
          width: 0,
        },
      },
    },
  ];
  let weihuikuanAll =
    state.huikuna.weihuikuan_yidaoqi + state.huikuna.weihuikuan_weidaoqi;

  let myChart = echarts.init(document.getElementById("huikuan-echarts"));
  let option = {
    color: ["#F486B9", "#617DFB", "#173667", "#FDCE34", "#0099F9", "#fa8c35"],
    tooltip: {
      show: false,
      backgroundColor: "#02132fC9",
      borderColor: "#0D97E460",
      textStyle: {
        fontSize: 16,
        color: "#DCDCDC",
      },
      formatter: (params) => {},
    },

    series: [
      {
        name: "",
        type: "pie",
        startAngle: 45, 
        center: ["35%", "50%"],
        radius: ["55%", "75%"],
        avoidLabelOverlap: false,
       
        label: {
          textStyle: {
            fontSize: 16,
            color: "#fff",
          },
          formatter: function(params) {
            let vv = 'a';
            if (params.dataIndex === 2) {
              return '';
            } else if (params.dataIndex === 0) {
              vv = 'a';
            } else if (params.dataIndex === 1) {
              vv = 'b';
            }
            let str = '{' + vv + '|';
            str += params.name + '\\n' + params.value + '万 ' + parseFloat(((params
              .value / (
                weihuikuanAll)) * 100).toFixed(2)) + '%';
            str += '}';
            return str;
          },
          rich: {
            a: {
              color: "#F486B9",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            }, 
            b: {
              color: "#617DFB",
              fontSize: 16,
              align: "center",
              lineHeight: 25,
              fontWeight: 600,
            },
          },
        },
        data: data,
      },
      {
        name: "",
        type: "pie",
        startAngle: 45, // 这里将起始角度设置为180度
        selectedMode: "single",
        center: ["35%", "50%"],
        radius: [0, "45%"],
        label: {
          position: "inner",
          textStyle: {
            fontSize: 14,
            color: "#fff",
            lineHeight: 20,
          },
          formatter: (params) => {
            return params.name + 
            "\\n" +
             params.value +"万"+
            "\\n" +
             params.percent + "%";
             
                },
        },

        data: [
          {
            value:
              state.huikuna.weihuikuan_weidaoqi +
              state.huikuna.weihuikuan_yidaoqi,
            name: "未回款",
          },
          {
            value: state.huikuna.yihuikuan,
            name: "已回款",
          },
        ],
      },
    ],
  };
  myChart.setOption(option);
};
const count = ref(0);
</script>

<style scoped>
.content {
  position: relative;
  background-color: #022b66;
  box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  border: 1px solid rgba(19, 127, 212, 0.6);
}
#huikuan-echarts {
  width: 100%;
  height: 100%;
}
</style>

  `;
};
